/* eslint no-console:0 consistent-return:0 */
'use strict';

// 创建着色器方法，输入参数：渲染上下文，着色器类型，数据源
function createShader(gl, type, source) {
  var shader = gl.createShader(type); // 创建着色器对象
  gl.shaderSource(shader, source); // 提供数据源
  gl.compileShader(shader); // 编译 -> 生成着色器
  var success = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
  if (success) {
    return shader;
  }

  console.log(gl.getShaderInfoLog(shader));
  gl.deleteShader(shader);
}

// 两个着色器 link（链接）到一个 program（着色程序）
function createProgram(gl, vertexShader, fragmentShader) {
  var program = gl.createProgram();
  gl.attachShader(program, vertexShader);
  gl.attachShader(program, fragmentShader);
  gl.linkProgram(program);
  var success = gl.getProgramParameter(program, gl.LINK_STATUS);
  if (success) {
    return program;
  }

  console.log(gl.getProgramInfoLog(program));
  gl.deleteProgram(program);
}

function main() {
  // 获取WebGL渲染上下文
  var canvas = document.querySelector('#c');
  var gl = canvas.getContext('webgl');
  if (!gl) {
    return;
  }

  // 获取 GLSL 着色器的字符串
  var vertexShaderSource = document.querySelector('#vertex-shader-2d').text;
  var fragmentShaderSource = document.querySelector('#fragment-shader-2d').text;

  // 创建 GLSL 着色器，上传 GLSL 源代码，编译着色器
  var vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
  var fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);

  // 将两个着色器链接到一个程序中
  var program = createProgram(gl, vertexShader, fragmentShader);

  // 查找顶点数据需要去哪里。
  var positionAttributeLocation = gl.getAttribLocation(program, 'a_position');

  // 创建一个缓冲区并在其中放置三个 2d 剪辑空间点
  var positionBuffer = gl.createBuffer();

  // 将其绑定到 ARRAY_BUFFER（将其视为 ARRAY_BUFFER =positionBuffer）
  gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);

  var positions = [0, 0, 0, 0.5, 0.7, 0];
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);

  //这行上面的代码是初始化代码。
  // 该行下面的代码是渲染代码。

  webglUtils.resizeCanvasToDisplaySize(gl.canvas);

  // 告诉 WebGL 如何从剪辑空间转换为像素
  gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);

  // 清除画布
  gl.clearColor(0, 0, 0, 0);
  gl.clear(gl.COLOR_BUFFER_BIT);

  // 告诉它用我们之前写好的着色程序（一个着色器对）
  gl.useProgram(program);

  // 开启属性
  gl.enableVertexAttribArray(positionAttributeLocation);

  // 绑定位置缓冲区。
  gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);

  // 将绑定点绑定到缓冲数据（positionBuffer）
  gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);

  // 告诉属性怎么从positionBuffer中读取数据 (ARRAY_BUFFER)
  var size = 2; // 每次迭代运行提取两个单位数据
  var type = gl.FLOAT; // 每个单位的数据类型是32位浮点型
  var normalize = false; // 不需要归一化数据
  var stride = 0; // 0 = 移动单位数量 * 每个单位占用内存（sizeof(type)）每次迭代运行运动多少内存到下一个数据开始点
  var offset = 0; // 从缓冲起始位置开始读取
  gl.vertexAttribPointer(positionAttributeLocation, size, type, normalize, stride, offset);

  // 绘制
  var primitiveType = gl.TRIANGLES;
  var offset = 0;
  var count = 3;
  gl.drawArrays(primitiveType, offset, count);
}

main();
